<template>
  <div>
    <div align="center">
      <label size="large" label-width="280px">— — — — — — — — — — — — — </label><br/>
      <label size="large" label-width="280px">* * * 区域综合风险评估模型 * * *</label><br/>
      <label size="large" label-width="280px">— — — — — — — — — — — — — </label>
    </div>
    <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="300px">
      <el-form-item label="区域风险点个数 建设施工点个数" prop="constructionCount">
        <el-input v-model="formData.constructionCount" placeholder="请输入区域风险点个数 建设施工点个数" show-word-limit
                  clearable :style="{width: '80%'}"></el-input>
      </el-form-item>
      <el-form-item label="高层建筑数" prop="highConstructionCount">
        <el-input v-model="formData.highConstructionCount" placeholder="请输入高层建筑数" show-word-limit clearable
                  :style="{width: '80%'}"></el-input>
      </el-form-item>
      <el-form-item label="危货道路数" prop="riskRoadCount">
        <el-input v-model="formData.riskRoadCount" placeholder="请输入危货道路数" show-word-limit clearable
                  :style="{width: '80%'}"></el-input>
      </el-form-item>
      <el-form-item label="液化石油气站场数" prop="liquefiedPetroleumCountInteger">
        <el-input v-model="formData.liquefiedPetroleumCountInteger" placeholder="请输入液化石油气站场数" show-word-limit
                  clearable :style="{width: '80%'}"></el-input>
      </el-form-item>
      <el-form-item label="水库大坝数" prop="reservoirDamCount">
        <el-input v-model="formData.reservoirDamCount" placeholder="请输入水库大坝数" show-word-limit clearable
                  :style="{width: '80%'}"></el-input>
      </el-form-item>
      <el-form-item label="民爆企业数" prop="civilExplosiveCount">
        <el-input v-model="formData.civilExplosiveCount" placeholder="请输入民爆企业数" show-word-limit clearable
                  :style="{width: '80%'}"></el-input>
      </el-form-item>
      <el-form-item label="油气长输管道数量" prop="oilPipeCount">
        <el-input v-model="formData.oilPipeCount" placeholder="请输入油气长输管道数量" show-word-limit clearable
                  :style="{width: '80%'}"></el-input>
      </el-form-item>
      <el-form-item label="体育场馆数量" prop="stadiumCount">
        <el-input v-model="formData.stadiumCount" placeholder="请输入体育场馆数量" show-word-limit clearable
                  :style="{width: '80%'}"></el-input>
      </el-form-item>
      <el-form-item label="水上交通线路数量" prop="waterTransportationCount">
        <el-input v-model="formData.waterTransportationCount" placeholder="请输入水上交通线路数量" show-word-limit
                  clearable :style="{width: '80%'}"></el-input>
      </el-form-item>
      <el-form-item label="宗教活动场所数量" prop="religiousServicesCount">
        <el-input v-model="formData.religiousServicesCount" placeholder="请输入宗教活动场所数量" show-word-limit
                  clearable :style="{width: '80%'}"></el-input>
      </el-form-item>
      <el-form-item label="喷涂企业数量" prop="sprayingEnterpriseCount">
        <el-input v-model="formData.sprayingEnterpriseCount" placeholder="请输入喷涂企业数量" show-word-limit clearable
                  :style="{width: '80%'}"></el-input>
      </el-form-item>
      <el-form-item label="船舶修建企业数量" prop="shipConstructionCount">
        <el-input v-model="formData.shipConstructionCount" placeholder="请输入船舶修建企业数量" show-word-limit clearable
                  :style="{width: '80%'}"></el-input>
      </el-form-item>
      <el-form-item label="加油站数量" prop="gasStationCount">
        <el-input v-model="formData.gasStationCount" placeholder="请输入加油站数量" show-word-limit clearable
                  :style="{width: '80%'}"></el-input>
      </el-form-item>
      <el-form-item label="区域面积（平方公里）" prop="areaMeasure">
        <el-input v-model="formData.areaMeasure" placeholder="请输入区域面积（平方公里）" show-word-limit clearable
                  :style="{width: '80%'}"></el-input>
      </el-form-item>
      <el-form-item label="人口密度" prop="populationDensity">
        <el-input v-model="formData.populationDensity" placeholder="请输入人口密度" show-word-limit clearable
                  :style="{width: '80%'}"></el-input>
      </el-form-item>
      <el-form-item label="经济密度" prop="economicDensity">
        <el-input v-model="formData.economicDensity" placeholder="请输入经济密度" show-word-limit clearable
                  :style="{width: '80%'}"></el-input>
      </el-form-item>
      <el-form-item size="large">
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
    <el-dialog
      title="评估结果"
      :visible.sync="centerDialogVisible"
      width="30%"
      center>
      <span>评估结果:{{riskResult}}</span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>
<script>
  import {handlerQYZH24} from "../../../api/edu/risk";

  export default {
    components: {},
    props: [],
    data() {
      return {
        formData: {
          constructionCount: '',
          highConstructionCount: '',
          riskRoadCount: '',
          liquefiedPetroleumCountInteger: '',
          reservoirDamCount: '',
          civilExplosiveCount: '',
          oilPipeCount: '',
          stadiumCount: '',
          waterTransportationCount: '',
          religiousServicesCount: '',
          sprayingEnterpriseCount: '',
          shipConstructionCount: '',
          gasStationCount: '',
          areaMeasure: '',
          populationDensity: '',
          economicDensity: '',
        },
        rules: {
          constructionCount: [{
            required: true,
            message: '请输入区域风险点个数 建设施工点个数',
            trigger: 'blur'
          }],
          highConstructionCount: [{
            required: true,
            message: '请输入高层建筑数',
            trigger: 'blur'
          }],
          riskRoadCount: [{
            required: true,
            message: '请输入危货道路数',
            trigger: 'blur'
          }],
          liquefiedPetroleumCountInteger: [{
            required: true,
            message: '请输入液化石油气站场数',
            trigger: 'blur'
          }],
          reservoirDamCount: [{
            required: true,
            message: '请输入水库大坝数',
            trigger: 'blur'
          }],
          civilExplosiveCount: [{
            required: true,
            message: '请输入民爆企业数',
            trigger: 'blur'
          }],
          oilPipeCount: [{
            required: true,
            message: '请输入油气长输管道数量',
            trigger: 'blur'
          }],
          stadiumCount: [{
            required: true,
            message: '请输入体育场馆数量',
            trigger: 'blur'
          }],
          waterTransportationCount: [{
            required: true,
            message: '请输入水上交通线路数量',
            trigger: 'blur'
          }],
          religiousServicesCount: [{
            required: true,
            message: '请输入宗教活动场所数量',
            trigger: 'blur'
          }],
          sprayingEnterpriseCount: [{
            required: true,
            message: '请输入喷涂企业数量',
            trigger: 'blur'
          }],
          shipConstructionCount: [{
            required: true,
            message: '请输入船舶修建企业数量',
            trigger: 'blur'
          }],
          gasStationCount: [{
            required: true,
            message: '请输入加油站数量',
            trigger: 'blur'
          }],
          areaMeasure: [{
            required: true,
            message: '请输入区域面积（平方公里）',
            trigger: 'blur'
          }],
          populationDensity: [{
            required: true,
            message: '请输入人口密度',
            trigger: 'blur'
          }],
          economicDensity: [{
            required: true,
            message: '请输入经济密度',
            trigger: 'blur'
          }],
        },
        centerDialogVisible : false,
      }
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {},
    methods: {
      submitForm() {
        handlerQYZH24(this.formData).then(response => {
          console.log(response)
          this.riskResult = response.riskResult;

          this.centerDialogVisible = true
        }).catch((error) => {
          console.log(error);
        });
      },
      resetForm() {
        this.$refs['elForm'].resetFields()
      },
    }
  }

</script>
<style>
</style>
